<template>
   <div class="rankBox">
      <div class="title">
         <p>热门景区排行</p>
         <img src="../../images/dataScreen-title.png" alt="">
      </div>
      <!-- 图形图表的容器 -->
      <div class="charts" ref="charts"></div>
   </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue';
let charts = ref()
onMounted(() => {
   // 创建实例
   // 一个容器可以展示多种类型的图形图表
   let mycharts = echarts.init(charts.value)
   // 设置配置项
   mycharts.setOption({
      // 标题组件
      title: {
         text: '景区排行',
         link: 'http://www.baidu.com',
         left: 'center',
         textStyle: {
            color: 'yellowgreen',
            fontSize: 20
         },
         subtext: '各大景区排行',
         subtextStyle: {
            color: 'yellowgreen',
            fontSize: 16
         }
      },
      // x|y组件
      xAxis: {
         type: 'category',    //图形图表在x轴均匀分布
      },
      yAxis: {},
      // 布局组件
      grid: {
         left: 30,
         right: 30,
         bottom: 20
      },
      // 系列：决定图形图表的类型
      series: [
         {
            type: 'bar',
            data: [10, 20, 30, 40, 50, 60, 70],
            // 柱状图：图形上的文本标签
            label: {
               show: true,
               // 文字的位置
               position: 'insideTop',
               // 文字的颜色
               color: 'black',
               fontSize: 16
            },
            // 是否显示背景颜色
            // showBackground: true,
            // 设置背景颜色
            // backgroundStyle: {
            //    color: {
            //       type: 'linear',
            //       x: 0,
            //       y: 0,
            //       x2: 0,
            //       y2: 1,
            //       colorStops: [{
            //          offset: 0, color: 'skyblue' // 0% 处的颜色
            //       }, {
            //          offset: 1, color: 'gray' // 100% 处的颜色
            //       }],
            //       global: false // 缺省为 false
            //    }
            // },
            // 柱条的样式
            itemStyle: {
               borderRadius: [10, 10, 0, 0],
               // 柱条颜色
               color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                     offset: 0, color: 'skyblue' // 0% 处的颜色
                  }, {
                     offset: 1, color: 'gray' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
               }
            }
         },
         {
            type: 'line',
            data: [20, 34, 56, 78, 32, 57, 46]
         }
      ],
      tooltip: {
         trigger: 'axis',
         backgroundColor: 'orange'
      },
   })
})
</script>

<style lang="scss" scoped>
.rankBox {
   background: url(../../images/dataScreen-main-rt.png) no-repeat;
   background-size: cover;

   .title {
      p {
         color: white;
         font-size: 20px;
      }
   }

   .charts {
      height: 330px;
   }
}
</style>